<template>
	<view class='content' style="width: 100%;">
		<view class="image-wrap" :style="{width: img_width+'px',height: img_height+'px'}">
			<!-- 画布 -->
			<canvas class="canvas-target" id="canvas-target" ref="canvasRef"
				:style="{width: img_width+'px',height: img_height+'px',right:-(img_width+SCREEN_WIDTH)+'px'}"
				canvas-id="canvas-target"></canvas>

			<!-- //人物 -->
			<image v-if="peopleImgStatus && people" id="handle_people" @touchstart="touchStartPhoto(5)"
				@touchmove="touchMove" class="source-img" :src="people" mode="scaleToFill"
				style="height: 100%;width: 100%;z-index:5;"></image>
			<!-- //背景 -->
			<image v-if="bgImg" id="handle_photo" @touchstart="touchStartPhoto(1)" @touchmove="touchMove"
				class="source-img" :src="bgImg" mode="scaleToFill" style="height: 100%;width: 100%;z-index:1;"></image>


			<!-- //挂件 -->
			<image @touchstart.stop="touchStartAll" @touchmove.stop="touchMove" v-for="(mask) in addMaskList"
				:key="mask.id" :id="'mask'+mask.id" class="mask"
				:class="{ 'mask-with-border': editType && mask.editing }" :src="mask.url" style="z-index:10;"
				:style="{opacity:mask.alpha , top: mask.center.y - mask.size.height / 2 + 'px', left: mask.center.x - mask.size.width / 2 + 'px', transform: 'rotate(' + mask.rotate + 'deg)' + 'scaleX(' + mask.scale.width + ')'+ 'scaleY(' + mask.scale.height + ')'}">
			</image>


			<!-- 关闭 -->
			<view v-if="editType" @click="clear()" class="iconBtn" :class="{ 'hide-handle': !(editMask.editing) }"
				:style="{ top: editMask.closeBtn.y - defbtnSize/4 + 'px', left: editMask.closeBtn.x - defbtnSize/4 + 'px','z-index': zIndex }">
				<image src="../../static/close.svg"></image>
			</view>

			<!-- 裁剪 -->
			<view v-if="editType && editMask.isPeople" @click="mattingFn()" class="iconBtn"
				:class="{ 'hide-handle': !(editMask.editing) }"
				:style="{ top: editMask.tailor.y - defbtnSize/4 + 'px', left: editMask.tailor.x - defbtnSize/4 + 'px','z-index': zIndex  }">
				<image src="../../static/zhaopian_bg.svg"></image>
			</view>

			<!-- 旋转 -->
			<view v-if="editType" @touchstart.stop="touchStartAll" @touchmove.stop="touchMove" class="rotate iconBtn"
				:class="{ 'hide-handle': !(editMask.editing) }"
				:style="{ top: editMask.rotateCenter.y - defbtnSize/4 + 'px', left: editMask.rotateCenter.x - defbtnSize/4 + 'px','z-index': zIndex+1 }">
				<image src="../../static/rotate.svg" id="rotate"></image>
			</view>
			<!-- 缩放 -->
			<view v-if="editType" @touchstart.stop="touchStartAll" @touchmove.stop="touchMove" class="shrink iconBtn"
				:class="{ 'hide-handle': !(editMask.editing) }"
				:style="{ top: editMask.shrinkCenter.y - defbtnSize/4 + 'px', left: editMask.shrinkCenter.x - defbtnSize/4 + 'px',transform:`rotate(${editMask.rotate+90}deg)`,'z-index': zIndex+2  }">
				<image src="../../static/shrink.svg" id="shrink"></image>
			</view>

		</view>
		<!-- <view class="toolbar-box" :style="{ height: toolbarHeight + 'px' }">
			<view class="toolbar">
				<view v-if="editMask.editing" class="scroll-view-item_H not-active-text" @click="setAlpha()">透明度
					<slider activeColor="#F0AD4E" style="display: inline-block;width: 450rpx;" :value="editMask.alpha"
						block-size="20" @change="setAlpha" step="0.01" min="0" max="1" show-value />
				</view>
				<view v-if="editMask.editing" class="scroll-view-item_H active-text" @click="clear()">清除贴纸</view>
			</view>
		</view> -->
		<u-modal v-model="showHit" :show-title="false" :show-confirm-button="false" :show-cancel-button="false"
			border-radius="25">
			<view class="u-relative u-flex u-row-center u-col-center u-p-20"
				style="background-color: #A2D16C;color: #fff;">
				<view>绘制绘本</view>
				<view class="u-absolute" style="right: 10rpx;top:0;font-size:50rpx;color: #fff;z-index:10;"
					@click="modalCancel">×</view>
			</view>
			<view style="background-color: rgba(255,255,255,0.5);">
				<view style="min-height: 200rpx;" class="u-flex u-row-center u-col-center u-p-20">
					<u-input v-model="nameValue" placeholder="输入孩子昵称,会印制在绘本上" border />
				</view>
				<view class="u-flex u-row-center u-col-center u-p-b-30">
					<view class="u-p-20 u-text-center u-m-r-20" @click="modalCancel"
						style="color:#fff;background-color:#A2D16C;border-radius:50rpx;min-width:150rpx;font-size:25rpx;">
						取消</view>
					<view class="u-p-20 u-text-center" @click="modalSaveFn"
						style="color:#fff;background-color:#A2D16C;border-radius:50rpx;min-width:150rpx;font-size:25rpx;">
						确定</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		_throttle,
		_uuid
	} from '../../common/utils.js'
	const sysInfo = uni.getSystemInfoSync();
	const isIphoneX = sysInfo.model.search('iPhone X') !== -1 || sysInfo.model.search('iPhone 11') !== -1;
	const paddingBottom = isIphoneX ? 30 : 0;
	const bottomNavHeight = 100;
	const toolbarHeight = 40;
	const SCREEN_WIDTH = sysInfo.windowWidth-80;
	const SCREEN_HEIGHT = sysInfo.windowHeight - bottomNavHeight - toolbarHeight - paddingBottom - 120;
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		props: {
			height: {
				type: Number,
				default: SCREEN_HEIGHT
			},
			selectedFilePath: {
				type: String,
				default: ''
			},
			peopleImg: {
				type: String,
				default: ''
			},
			peopleImgType: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: ''
			},
			maskList: {
				type: Array,
				default: () => [{
					id: 1,
					url: ''
				}]
			},
			modifyType: {
				type: Number,
				default: 0
			},
			showHitType: {
				type: Boolean,
				default: false
			},
			editIndex: {
				type: Number,
				default: 0
			},
			editType: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				SCREEN_WIDTH, // 图片容器宽度,
				SCREEN_HEIGHT,
				img_width: SCREEN_WIDTH,
				img_height: this.height || SCREEN_HEIGHT,
				bottomNavHeight: bottomNavHeight,
				toolbarHeight: toolbarHeight,
				canvasCtx: null,
				addMaskList: [],
				editMask: this.getNewMask(),
				bgImg: this.selectedFilePath,
				people: this.peopleImg,
				peopleImgStatus: this.peopleImgType,
				bgImgInfo: null,
				backgroundColor: this.bgColor,
				touchType: 'rotate',
				showHit: this.showHitType,
				nameValue: null,
				defSize: 200,
				defbtnSize: 100,
				zIndex: 11
			};
		},
		watch: {
			selectedFilePath: function(val) {
				const _this = this
				const query = uni.createSelectorQuery().in(this);
				this.bgImg = val;
				this.people = this.peopleImg
				this.peopleImgStatus = this.peopleImgType
				setTimeout(() => {
					try {
						query.select('#handle_photo').boundingClientRect(data => {
							// _this.img_width = data.width
							// _this.img_height = data.height
							_this.bgImgInfo = data
						}).exec()
					} catch (e) {
						console.log(e, 'selectedFilePath error !')
					}
				}, 100)
			},
			bgColor: function(val) {
				this.backgroundColor = val
			},
			peopleImgType: function(val) {
				this.peopleImgStatus = val
			},
			showHitType: function(res) {
				this.showHit = res
			}
		},
		mounted() {
			let that = this
			this.canvasCtx = uni.createCanvasContext('canvas-target', this);
			this.$on('save', function() {
				this.save()
			})
		},
		methods: {
			// 保存
			modalSaveFn() {
				this.showHit = false
				this.$emit('nameEditFn', this.nameValue, true)
			},
			//取消
			modalCancel() {
				this.showHit = false
				this.$emit('nameEditFn', this.nameValue, false)
			},
			mattingFn() {
				let present = this.addMaskList.filter(item => item.id == this.editMask.id)
				let _this = this
				uni.showLoading({
					title: '加载中'
				});
				this.$emit('matting', present[0].tailorUrl, res => {
					_this.editMask.url = this.$url.baseImgUrl + res
					uni.hideLoading();
				})
			},
			touchTypeFn(e) {
				this.touchType = e.target.id
			},
			getNewMask() {
				return { // 贴图层
					id: '',
					editing: false,
					url: '',
					scale: {
						width: 1,
						height: 1,
					}, // 缩放比例
					rotate: 0, // 旋转角度
					alpha: 1,
					size: {
						width: this.defSize,
						height: this.defSize,
					},
					center: { // 贴图层中心点坐标
						x: this.img_width / 2,
						y: this.img_height / 2
					},
					leftTopPoint: {
						x: (this.img_width - this.defSize) / 2,
						y: (this.img_height - this.defSize) / 2
					},
					start: {
						x: null,
						y: null,
					},
					//旋转按钮
					rotateCenter: {
						x: (this.img_width + this.defSize) / 2,
						y: (this.img_height - this.defSize) / 2
					},
					//缩放按钮
					shrinkCenter: {
						x: (this.img_width + this.defSize) / 2,
						y: (this.img_height + this.defSize) / 2
					},
					//裁剪按钮位置
					tailor: {
						x: (this.img_width - this.defSize) / 2,
						y: (this.img_height + this.defSize) / 2
					},
					//关闭按钮位置
					closeBtn: {
						x: (this.img_width - this.defSize) / 2,
						y: (this.img_height - this.defSize) / 2
					},
					isPeople: true
				} // 正在编辑的贴纸
			},
			setAlpha(e) {
				const index = this.addMaskList.findIndex(item => item.id === this.editMask.id)
				this.editMask.alpha = e.detail.value
				this.addMaskList[index].alpha = e.detail.value
			},
			clear() {
				this.addMaskList = this.addMaskList.filter(item => item.id !== this.editMask.id)
				this.editMask.id = ''
				this.editMask.editing = false
				let isbgArr = this.addMaskList.filter(item => item.isBg)
				if (isbgArr.length == 0) {
					this.peopleImgStatus = true
				}
			},
			clearCanvas() {
				this.editMask = this.getNewMask()
				this.peopleImgStatus = true
				this.addMaskList = []
			},
			modify() {
				let mType;
				this.modifyType == 0 ? this.addMaskList.length > 0 ? mType = 1 : mType = 0 : mType = 3
				return mType
			},
			touchStartAll(e) {
				if (this.modifyType == 1) {
					return false
				}
				if (!this.editType) {
					return false
				}
				if (e.target.id !== 'handle_photo' || e.target.id !== 'handle_people') {
					e.preventDefault()
				}
				if (e.target.id.includes('mask')) {
					const id = e.target.id.substring(4)
					const index = this.addMaskList.findIndex(item => item.id === id)
					this.editMask.editing = true
					this.addMaskList.map((item, i) => {
						if (i === index) { //正在编辑此mask
							item.editing = true
							this.editMask = item
						} else {
							item.editing = false
						}
					})
				}
				if (e.target.id != "") {
					let editMask
					if (e.target.id.includes('mask')) {
						const id = e.target.id.substring(4)
						const index = this.addMaskList.findIndex(item => item.id === id)
						editMask = this.addMaskList[index];
					} else {
						editMask = this.editMask
					}
					const i = this.addMaskList.findIndex(item => item.id === editMask.id)
					editMask.start.x = e.touches[0].clientX
					editMask.start.y = e.touches[0].clientY
					this.addMaskList[i] = editMask
				}
			},
			touchMove(e) {
				if (this.modifyType == 1) {
					return false
				}
				if (!this.editType) {
					return false
				}
				if (e.target.id !== 'handle_photo' || e.target.id !== 'handle_people') {
					e.preventDefault()
				}
				_throttle(this.touchMoveAll(e), 500)
			},
			touchMoveAll: function(e) {
				let editMask
				if (e.target.id.includes('mask')) {
					const id = e.target.id.substring(4)
					const index = this.addMaskList.findIndex(item => item.id === id)
					editMask = this.addMaskList[index];
				} else {
					editMask = this.editMask
				}
				const i = this.addMaskList.findIndex(item => item.id === editMask.id)

				// 触摸点
				const current_x = e.touches[0].clientX
				const current_y = e.touches[0].clientY

				// 伸缩比例
				const old_scale = editMask.scale;
				const old_rotate = editMask.rotate;
				const moved_x = current_x - editMask.start.x //滑动距离x
				const moved_y = current_y - editMask.start.y //滑动距离y

				// 正在编辑的mask的中心点
				const old_center_x = editMask.center.x
				const old_center_y = editMask.center.y
				// 伸缩操作点
				const old_shrink_center_x = editMask.shrinkCenter.x
				const old_shrink_center_y = editMask.shrinkCenter.y
				const new_shrink_center_x = old_shrink_center_x + moved_x
				const new_shrink_center_y = old_shrink_center_y + moved_y

				//裁剪按钮
				const old_tailor_x = editMask.tailor.x
				const old_tailor_y = editMask.tailor.y
				const new_tailor_x = old_tailor_x + moved_x
				const new_tailor_y = old_tailor_y + moved_y

				//关闭按钮
				const old_closeBtn_x = editMask.closeBtn.x
				const old_closeBtn_y = editMask.closeBtn.y
				const new_closeBtn_x = old_closeBtn_x + moved_x
				const new_closeBtn_y = old_closeBtn_y + moved_y

				// 旋转操作点
				const old_rotate_center_x = editMask.rotateCenter.x
				const old_rotate_center_y = editMask.rotateCenter.y
				const new_rotate_center_x = old_rotate_center_x + moved_x
				const new_rotate_center_y = old_rotate_center_y + moved_y

				//计算边界
				let img_width = editMask.scale.width * editMask.size.width
				let img_height = editMask.scale.height * editMask.size.height
				let x = img_width / 2 + 10
				let x1 = this.img_width - img_width / 2 - 10
				let y = img_height / 2 + 10
				let y1 = this.img_height - img_height / 2 - 10

				if (e.target.id.includes('mask')) {
					// old_center_x + moved_x+editMask
					editMask.center.x = old_center_x + moved_x
					editMask.center.y = old_center_y + moved_y
					editMask.shrinkCenter.x = new_shrink_center_x
					editMask.shrinkCenter.y = new_shrink_center_y
					editMask.rotateCenter.x = new_rotate_center_x
					editMask.rotateCenter.y = new_rotate_center_y

					editMask.tailor.x = new_tailor_x
					editMask.tailor.y = new_tailor_y
					editMask.closeBtn.x = new_closeBtn_x
					editMask.closeBtn.y = new_closeBtn_y

					editMask.start.x = current_x
					editMask.start.y = current_y

				} else if (e.target.id.includes('shrink')) {
					// 得到拉伸点到中心点的距离，可算出伸缩比例
					const diff_x_old = old_shrink_center_x - editMask.center.x
					const diff_y_old = old_shrink_center_y - editMask.center.y
					const diff_x_new = new_shrink_center_x - editMask.center.x
					const diff_y_new = new_shrink_center_y - editMask.center.y
					const distance_old = Math.sqrt(diff_x_old * diff_x_old + diff_y_old * diff_y_old)
					const distance_new = Math.sqrt(diff_x_new * diff_x_new + diff_y_new * diff_y_new)
					const jiaodu_new = (Math.atan2(diff_y_new, diff_x_new) / Math.PI) * 180 - editMask.rotate
					const jiaodu_old = (Math.atan2(diff_y_old, diff_x_old) / Math.PI) * 180 - editMask.rotate
					const width_new = distance_new * Math.cos(jiaodu_new * (Math.PI / 180))
					const height_new = distance_new * Math.sin(jiaodu_new * (Math.PI / 180))
					const width_old = distance_old * Math.cos(jiaodu_old * (Math.PI / 180))
					const height_old = distance_old * Math.sin(jiaodu_old * (Math.PI / 180))

					const width_scale = (width_new / width_old) * old_scale.width
					const height_scale = (height_new / height_old) * old_scale.height

					// if (editMask.center.x > x && editMask.center.x < x1 && editMask.center.y > y && editMask.center.y < y1 && height_scale) { //超出不缩放
					editMask.scale.width = width_scale
					editMask.scale.height = height_scale
					editMask.shrinkCenter.x = new_shrink_center_x
					editMask.shrinkCenter.y = new_shrink_center_y


					editMask.closeBtn.x = old_closeBtn_x - moved_x
					editMask.closeBtn.y = old_closeBtn_y - moved_y

					// 计算旋转点位置(拉伸时x,x1,y,y1平行)
					const distance_r = Math.sqrt(editMask.size.width * editMask.size.width * width_scale *
						width_scale +
						editMask.size.height * editMask.size.height * height_scale * height_scale) //旋转半径
					const jiaodu = (Math.atan2(height_scale, width_scale) / Math.PI) * 180
					const rotate_x = Math.cos((jiaodu - editMask.rotate) * (Math.PI / 180)) * distance_r
					const rotate_y = Math.sin((jiaodu - editMask.rotate) * (Math.PI / 180)) * distance_r

					editMask.rotateCenter.x = old_center_x + rotate_x / 2
					editMask.rotateCenter.y = old_center_y - rotate_y / 2

					const tailor_x = Math.cos((jiaodu - editMask.rotate) * (Math.PI / 180)) * distance_r
					const tailor_y = Math.sin((jiaodu - editMask.rotate) * (Math.PI / 180)) * distance_r

					editMask.tailor.x = old_center_x - tailor_x / 2
					editMask.tailor.y = old_center_y + tailor_y / 2

					editMask.start.x = current_x
					editMask.start.y = current_y
					// }

				} else if (e.target.id.includes('rotate')) {
					// 得到旋转点到中心点的距离，可算出旋转角度
					const diff_rotate_x_old = old_rotate_center_x - old_center_x
					const diff_rotate_y_old = old_rotate_center_y - old_center_y
					const diff_rotate_x_new = new_rotate_center_x - old_center_x
					const diff_rotate_y_new = new_rotate_center_y - old_center_y

					const distance_r = Math.sqrt(editMask.size.width * editMask.size.width * old_scale.width *
						old_scale.width +
						editMask.size.height * editMask.size.height * old_scale.height * old_scale.height) //旋转半径

					const angle_old = (Math.atan2(diff_rotate_y_old, diff_rotate_x_old) / Math.PI) * 180
					const angle_new = (Math.atan2(diff_rotate_y_new, diff_rotate_x_new) / Math.PI) * 180
					const rotate = angle_new - angle_old + old_rotate
					editMask.rotate = rotate
					const jiaodu = (Math.atan2(old_scale.height, old_scale.width) / Math.PI) * 180
					const rotate_x = Math.cos((jiaodu - rotate) * (Math.PI / 180)) * distance_r
					const rotate_y = Math.sin((jiaodu - rotate) * (Math.PI / 180)) * distance_r
					editMask.rotateCenter.x = old_center_x + rotate_x / 2
					editMask.rotateCenter.y = old_center_y - rotate_y / 2

					// 计算收缩点位置
					const shrink_x = Math.cos((jiaodu + rotate) * (Math.PI / 180)) * distance_r
					const shrink_y = Math.sin((jiaodu + rotate) * (Math.PI / 180)) * distance_r
					editMask.shrinkCenter.x = old_center_x + shrink_x / 2
					editMask.shrinkCenter.y = old_center_y + shrink_y / 2


					const tailor_x = Math.cos((jiaodu - rotate) * (Math.PI / 180)) * distance_r
					const tailor_y = Math.sin((jiaodu - rotate) * (Math.PI / 180)) * distance_r
					editMask.tailor.x = old_center_x - tailor_x / 2
					editMask.tailor.y = old_center_y + tailor_y / 2

					const closeBtn_x = Math.cos((jiaodu + rotate) * (Math.PI / 180)) * distance_r
					const closeBtn_y = Math.sin((jiaodu + rotate) * (Math.PI / 180)) * distance_r


					editMask.closeBtn.x = old_center_x - closeBtn_x / 2
					editMask.closeBtn.y = old_center_y - closeBtn_y / 2


					editMask.start.x = current_x
					editMask.start.y = current_y
				}
				// //边界限制
				// if (editMask.center.x < x) {
				// 	editMask.center.x = x
				// 	editMask.shrinkCenter.x = old_shrink_center_x
				// 	editMask.rotateCenter.x = old_rotate_center_x
				// 	editMask.tailor.x = old_tailor_x
				// 	editMask.closeBtn.x = old_closeBtn_x
				// }
				// if (editMask.center.x > x1) {
				// 	editMask.center.x = x1
				// 	editMask.shrinkCenter.x = old_shrink_center_x
				// 	editMask.rotateCenter.x = old_rotate_center_x
				// 	editMask.tailor.x = old_tailor_x
				// 	editMask.closeBtn.x = old_closeBtn_x
				// }
				// if (editMask.center.y < y) {
				// 	editMask.center.y = y
				// 	editMask.shrinkCenter.y = old_shrink_center_y
				// 	editMask.rotateCenter.y = old_rotate_center_y
				// 	editMask.tailor.y = old_tailor_y
				// 	editMask.closeBtn.y = old_closeBtn_y
				// }
				// if (editMask.center.y > y1) {
				// 	editMask.center.y = y1
				// 	editMask.shrinkCenter.y = old_shrink_center_y
				// 	editMask.rotateCenter.y = old_rotate_center_y
				// 	editMask.tailor.y = old_tailor_y
				// 	editMask.closeBtn.y = old_closeBtn_y
				// }
				this.addMaskList[i] = editMask
			},
			touchStartPhoto(e) {
				// this.zIndex = e
				this.editMask.editing = false
				this.addMaskList.map(item => {
					item.editing = false
					return item
				})

			},
			async getImgInfo(path) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: path,
						success: function(imgInfo) {
							resolve({
								code: 200,
								imgInfo
							})
						},
						fail(err) {
							console.error(err)
							reject({
								code: 500,
								message: '获取图片信息失败'
							})
						}
					});
				})
			},
			//从网络图片添加mask
			selectMask(mask, isBg = false, clear = false) {
				const _this = this
				uni.getImageInfo({
					src: mask.url,
					success: function(_imgInfo) {
						const editMask = _this.getNewMask();
						// console.log(_imgInfo.path,mask.url)
						editMask.url = mask.url;
						editMask.tailorUrl = mask.tailorUrl;
						editMask.id = _uuid();
						editMask.editing = true;
						editMask.isPeople = mask.isPeople;
						if (isBg) {
							editMask.isBg = true;
							_this.peopleImgStatus = false
						}
						// editMask.sourceWidth = _imgInfo.width;
						// editMask.sourceHeight = _imgInfo.height;
						let addMaskList
						if (clear) {
							addMaskList = []
						} else {
							addMaskList = _this.addMaskList
							addMaskList.map(item => {
								item.editing = false
							})
						}
						addMaskList.push(editMask)
						_this.addMaskList = addMaskList
						_this.editMask = editMask
					},
					fail(err) {
						console.error(err)
					}
				});
			},
			//从本地图片添加mask
			addLocalMask(localPath, isBg = false, clear = false) {
				const editMask = this.getNewMask();
				editMask.url = localPath;
				editMask.id = _uuid();
				editMask.editing = true;
				if (isBg) {
					editMask.isBg = true;
					_this.peopleImgStatus = false
				}
				let addMaskList
				if (clear) {
					addMaskList = []
				} else {
					addMaskList = this.addMaskList
					this.peopleImgStatus = false
					addMaskList.map(item => {
						item.editing = false
					})
				}
				addMaskList.push(editMask)
				this.addMaskList = addMaskList
				this.editMask = editMask
			},
			async save(fun,pagei) {
				const data = this.bgImgInfo
				const _this = this
				_this.canvasCtx.clearRect(0, 0, this.img_width, this.img_height)

				if (_this.bgImg) {
					_this.canvasCtx.drawImage(_this.bgImg, 0, 0, (_this.img_width ?? data.width), (_this.img_height ??
						data.height))
				}
				// 画贴纸
				for (let mask of _this.addMaskList) {
					const mask_width = mask.size.width * mask.scale.width
					const mask_height = mask.size.height * mask.scale.height
					const mask_center_x = mask.center.x
					const mask_center_y = mask.center.y
					_this.canvasCtx.translate(mask.center.x, mask.center.y)
					_this.canvasCtx.rotate((mask.rotate * Math.PI) / 180)
					_this.canvasCtx.setGlobalAlpha(mask.alpha)
					_this.canvasCtx.drawImage(mask.url, -mask_width / 2, -mask_height / 2, mask_width, mask_height)
					_this.canvasCtx.rotate(-(mask.rotate * Math.PI) / 180)
					_this.canvasCtx.translate(-mask.center.x, -mask.center.y)
				}
				//总体绘画出来保存到相册
				_this.canvasCtx.draw(false, function() {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: _this.img_width ?? data.width,
						height: _this.img_height ?? data.height,
						canvasId: 'canvas-target',
						success: function(res) {
							// 在H5平台下，tempFilePath 为 base64
							uni.uploadFile({
								// #ifdef APP-PLUS
								url: _this.$url.url + 'upload_file_oss',
								// #endif
								// #ifdef H5
								url:  _this.$url.url + 'upload_file_oss',
								// #endif
								filePath: res.tempFilePath,
								name: 'file',
								header: {
									'Authorized': uni.getStorageSync('token'),
								},
								success: (uploadFileRes) => {
									if(uploadFileRes.statusCode == 200){
										let res = JSON.parse(uploadFileRes.data)
										let mask = {
											url: res.data.url
										}
										fun && fun(mask,pagei)
									}else{
										uni.showToast({
											title:uploadFileRes.errMsg,
											icon:'none'
										})
									}
								},
							});
						},
						fail(e) {
							console.error('canvasToTempFilePath', e)
						}
					}, _this)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		overflow: auto;
		margin-top: 0 !important;
	}

	.image-wrap {
		overflow: hidden;
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;

		.source-img {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		.canvas-target {
			position: absolute;
		}

		.mask {
			height: 200px;
			width: 200px;
			box-sizing: border-box;
			position: absolute;
			border: 1px dashed rgba(255, 255, 255, 0.0);
		}

		.mask-with-border {
			border: dashed 1px white !important;
		}

		.iconBtn {
			position: absolute;
			width: 100upx;
			height: 100upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.rotate {
			// z-index: 999;
		}

		.shrink {
			// z-index: 1000;
		}

		.hide-handle {
			display: none;
		}
	}

	.toolbar-box {
		width: 100%;
		position: fixed;
		bottom: 240px;

		.toolbar {
			height: 40px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
</style>
